<p id="btn" (click)="close()" [title]="'返回'+parentCom">
  <!-- <i nz-icon nzType="left" nzTheme="outline"></i> -->
  <ion-icon name="arrow-back"></ion-icon>
  {{parentCom}}
</p>

<p style="    padding-left: 24px;
    font-size: 16px;
    border-left: solid #0987fe;">基本信息</p>

<!-- <form nz-form>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>设备编号</nz-form-label>
    <nz-form-control [nzSpan]="12" [nzHasFeedback]="!codeRequire"
                     [nzValidateStatus]="codeRequire?'success':'error'">
      <input #codeEle nz-input name="code" [(ngModel)]="device['code']" [disabled]="option=='edit'"
             placeholder="请输入唯一编号"
             (ngModelChange)="device.code?codeRequire=true:codeRequire=false;"/>
      <nz-form-explain *ngIf="!codeRequire">{{'请输入唯一编号！'}}</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>设备名称</nz-form-label>
    <nz-form-control [nzSpan]="12" [nzHasFeedback]="!nameRequire"
                     [nzValidateStatus]="nameRequire?'success':'error'">
      <input nz-input name="name" [(ngModel)]="device['name']" placeholder="请输入设备名称"
             (ngModelChange)="device.name?nameRequire=true:nameRequire=false;"/>
      <nz-form-explain *ngIf="!nameRequire">{{'请输入设备名称！'}}</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7">设备类型</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <nz-select name="type"  [(ngModel)]="device['type']" placeholder="请选择设备类型">
          <nz-option [nzLabel]="'A类设备'" [nzValue]="'重点设备'"></nz-option>
          <nz-option [nzLabel]="'B类设备'" [nzValue]="'主要设备'"></nz-option>
          <nz-option [nzLabel]="'C类设备'" [nzValue]="'一般设备'"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7">设备分组</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <input nz-input name="group" [(ngModel)]="device['group']" placeholder="请选择设备分组"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" nzRequired>设备模板</nz-form-label>
    <nz-form-control [nzSpan]="10" [nzHasFeedback]="!templateRequire"
                     [nzValidateStatus]="templateRequire?'success':'error'">
      <nz-select name="template" [(ngModel)]="device.template" nzPlaceHolder="请选择设备模板" [compareWith]="compareFn"
                 (ngModelChange)="templateChanged()">
        <nz-option *ngFor="let temp of templateList" [nzValue]="temp" [nzLabel]="temp['name']"></nz-option>
      </nz-select>
      <nz-form-explain *ngIf="!templateRequire">{{'请选择设备模板！'}}</nz-form-explain>
    </nz-form-control>
    <button nz-tooltip nzTitle="刷新设备模板列表" nzPlacement="right" nz-button
            style="margin-top: 4px;margin-left: 8px;padding: 0 13px;" nzType="primary" (click)="getTemplate()"
            [nzLoading]="loading">
      <i nz-icon nzType="reload" nzTheme="outline"></i>
    </button>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7">数据源名称</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <input nz-input name="connect" [(ngModel)]="device['connect']" placeholder="请输入数据源名称"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7">设备服务</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <input nz-input name="servername" [(ngModel)]="device['servername']" placeholder="请输入设备服务"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7">服务端地址</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <input nz-input name="serveraddress" [(ngModel)]="device['serveraddress']" placeholder="请输入服务地址"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7">规格型号</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <input nz-input name="model" [(ngModel)]="device['model']" placeholder="请输入规格型号"/>
    </nz-form-control>
  </nz-form-item>
  
  <nz-form-item>
    <nz-form-label [nzSpan]="7">厂商</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <input nz-input name="manufacturer" [(ngModel)]="device['manufacturer']" placeholder="请输入设备厂商"/>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" >展示卡片</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <nz-switch class="switch" name="display" [(ngModel)]="device.display"></nz-switch>
      <span style="margin-left: 8px"
            [ngStyle]="{'color':device.display?'#1ab768':'#ff2222'}">{{device.display ? '展示' : '隐藏'}}</span>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" >卡片颜色</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <input name="color" nz-input [(ngModel)]="device['devicesetting']['cardcolor']">
    </nz-form-control>
    <input [cpPresetColors]="presetColors" readonly title="选择颜色"
           [(colorPicker)]="device['devicesetting']['cardcolor']"
           style="border: 1px solid;outline: none;height: 30px;width: 30px;margin-top: 5px;margin-left: 8px;cursor: pointer;"
           [style.background]="device['devicesetting']['cardcolor']"/>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7" >状态</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <nz-switch class="switch" name="status" [(ngModel)]="device.status"></nz-switch>
      <span style="margin-left: 8px"
            [ngStyle]="{'color':device.status?'#1ab768':'#ff2222'}">{{device.status ? '运行' : '停机'}}</span>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="7">备注</nz-form-label>
    <nz-form-control [nzSpan]="12">
      <textarea name="note" [(ngModel)]="device['note']" nz-input [nzAutosize]="{ minRows: 2, maxRows: 6 }"
                placeholder="设备备注信息"></textarea>
    </nz-form-control>
  </nz-form-item>
</form> -->
<div class="am-list-body">
  <InputItem name="code" [(ngModel)]="device['code']" [clear]="true" [placeholder]="'请输入唯一编号'"
    [disabled]="option=='edit'" [moneyKeyboardAlign]="'left'" [error]="!codeRequire"
    (onErrorClick)="inputErrorClick('设备编号',$event)" (onChange)="inputChange('设备编号', $event)"><span
      style="color: red;">*</span>设备编号
  </InputItem>
</div>
<div class="am-list-body">
  <InputItem name="name" [(ngModel)]="device['name']" [clear]="true" [placeholder]="'请输入设备名称'"
    [moneyKeyboardAlign]="'left'" [error]="!nameRequire" (onErrorClick)="inputErrorClick('设备名称',$event)"
    (onChange)="inputChange('设备名称', $event)"><span style="color: red;">*</span>设备名称
  </InputItem>
</div>
<div class="am-list-body">
  <ion-item style="padding: 0px; border-bottom: none;">
    <ion-label style="color: black;">设备类型</ion-label>
    <ion-select placeholder="设备类型" name="type" [(ngModel)]="device['type']" ok-text="确认" cancel-text="取消">
      <ion-select-option value="重点设备">A类设备</ion-select-option>
      <ion-select-option value="主要设备">B类设备</ion-select-option>
      <ion-select-option value="一般设备">C类设备</ion-select-option>
    </ion-select>
  </ion-item>
</div>
<div class="am-list-body">
  <InputItem name="group" [(ngModel)]="device['group']" [clear]="true" [placeholder]="'请输入设备分组'"
    [moneyKeyboardAlign]="'left'">设备分组
  </InputItem>
</div>
<div class="am-list-body">
  <ion-item style="padding: 0px; border-bottom: none;">
    <span style="color: red;">*</span>
    <ion-label style="color: black;">设备模板</ion-label>
    <ion-select name="device" placeholder="选择设备模板" [(ngModel)]="device.template" (compareWith)="compareFn" ok-text="确认"
      cancel-text="取消" (ngModelChange)="templateChanged()">
      <ion-select-option *ngFor="let item of templateList" [value]="item">{{item.name}}</ion-select-option>
    </ion-select>
  </ion-item>
  <!-- <ion-icon name="alert"></ion-icon> -->
</div>
<div class="am-list-body">
  <InputItem name="connect" [(ngModel)]="device['connect']" [clear]="true" [placeholder]="'请输入数据源名称'"
    [moneyKeyboardAlign]="'left'">数据源名称
  </InputItem>
</div>
<div class="am-list-body">
  <InputItem name="servername" [(ngModel)]="device['servername']" [clear]="true" [placeholder]="'请输入设备服务'"
    [moneyKeyboardAlign]="'left'">设备服务
  </InputItem>
</div>
<div class="am-list-body">
  <InputItem name="serveraddress" [(ngModel)]="device['serveraddress']" [clear]="true" [placeholder]="'请输入服务端地址'"
    [moneyKeyboardAlign]="'left'">服务端地址
  </InputItem>
</div>
<div class="am-list-body">
  <InputItem name="model" [(ngModel)]="device['model']" [clear]="true" [placeholder]="'请输入规格型号'"
    [moneyKeyboardAlign]="'left'">规格型号
  </InputItem>
</div>
<div class="am-list-body">
  <InputItem name="manufacturer" [(ngModel)]="device['manufacturer']" [clear]="true" [placeholder]="'请输入设备厂商'"
    [moneyKeyboardAlign]="'left'">厂商
  </InputItem>
</div>
<div class="am-list-body">
  <ListItem multipleLine [extra]="on">
    展示卡片
  </ListItem>
  <ng-template #on>
    <Switch [checked]="true" name="display" [(ngModel)]="device.display"></Switch>
  </ng-template>
</div>
<div class="am-list-body">
  <InputItem class="inputColor" name="color" [(ngModel)]="device['devicesetting']['cardcolor']" [clear]="true"
    [placeholder]="'请选择卡片颜色'" [moneyKeyboardAlign]="'left'">卡片颜色
  </InputItem>
  <input [cpPresetColors]="presetColors" readonly title="选择颜色" [(colorPicker)]="device['devicesetting']['cardcolor']"
    style="border: 1px;outline: none;height: 30px;width: 51px;margin-top: 5px;cursor: pointer; border-radius: 15px;float: right; margin-right: 15px;"
    [style.background]="device['devicesetting']['cardcolor']" />
</div>
<div class="am-list-body">
  <ListItem multipleLine [extra]="off">
    状态
  </ListItem>
  <ng-template #off>
    <Switch [checked]="true" name="status" [(ngModel)]="device.status">
    </Switch>
  </ng-template>
</div>
<div class="am-list-body">
  <InputItem name="note" [(ngModel)]="device['note']" [clear]="true" [placeholder]="'设备备注信息'"
    [moneyKeyboardAlign]="'left'">备注
  </InputItem>
</div>

<p *ngIf="device['attrs']!=null" style="padding-left: 24px;
    font-size: 16px;
    border-left: solid #0987fe;">属性信息</p>

<!-- <nz-table *ngIf="device['attrs']!=null" #attrsTable nzSize="small" [nzData]="device['attrs']"
          [nzFrontPagination]="false" [nzShowPagination]="false"
          style="margin: 24px;padding-left: 150px;padding-right: 150px">
  <thead>
  <tr>
    <th nzWidth="64px">
      #
    </th>
    <th>名称</th>
    <th>编号</th>
    <th>值类型</th>
    <th>描述</th>
    <th>单位</th>
    <th nzWidth="80px">累加值</th>
    <th nzWidth="80px">卡片展示</th>
    <th nzWidth="80px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of attrsTable.data">
    <td *ngIf="data.key!='null'">
      {{device['attrs'].indexOf(data) + 1}}
    </td>
    <td *ngIf="data.key=='null'">
      <button class="custom-btn" nz-button (click)="addAttr()" nz-tooltip nzTitle="添加一条属性" nzPlacement="right">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
      </button>
    </td>
    <td *ngIf="data.key!='null'">
      <input type="text" nz-input [(ngModel)]="data['name']" placeholder="请填写名称" />
    </td>
    <td *ngIf="data.key!='null'">
      <input type="text" nz-input [(ngModel)]="data['code']" placeholder="请填写唯一编号"/>
    </td>
    <td *ngIf="data.key!='null'">
      <nz-select [(ngModel)]="data['valuetype']" nzPlaceHolder="请选择数值类型" style="width:100%;">
        <nz-option [nzValue]="'string'" [nzLabel]="'字符串'"></nz-option>
        <nz-option [nzValue]="'number'" [nzLabel]="'数字'"></nz-option>
        <nz-option [nzValue]="'bool'" [nzLabel]="'布尔'"></nz-option>
        <nz-option [nzValue]="'option'" [nzLabel]="'枚举'"></nz-option>
      </nz-select>
    </td>
    <td *ngIf="data.key!='null'">
      <input type="text" nz-input [(ngModel)]="data['description']" placeholder="请填写描述"/>
    </td>
    <td *ngIf="data.key!='null'">
      <input type="text" nz-input [(ngModel)]="data['unit']" placeholder="请填写单位"/>
    </td>
    <td *ngIf="data.key!='null'">
      <nz-switch class="switch" [(ngModel)]="data['sum']"></nz-switch>
    </td>
    <td *ngIf="data.key!='null'">
      <nz-switch class="switch" [(ngModel)]="data['display']"></nz-switch>
    </td>
    <td *ngIf="data.key!='null'">
      <a style="color: #ff2222" (click)="remove(data['key'])">
        <i nz-icon nzType="delete" nzTheme="outline"></i>删除
      </a>
    </td>
  </tr>
  </tbody>
</nz-table> -->
<table style="width: 100%; border-collapse:separate; border-spacing:0px 20px; ">
  <thead>
    <tr>
      <!-- <th style="width: 4%;">#</th> -->
      <th style="width: 15%;">名称</th>
      <th style="width: 15%;">编号</th>
      <th style="width: 17%;">值类型</th>
      <th style="width: 15%;">单位</th>
      <th style="width: 14%;">累加值</th>
      <th style="width: 14%;">卡片展示</th>
      <th style="width: 10%;">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of device['attrs']">
      <!-- <td *ngIf="data.code!='null'" style="width: 4%;">
        {{device['attrs'].indexOf(data) + 1}}
      </td> -->
      <td *ngIf="data.code=='null'">
        <!-- <button class="custom-btn" nz-button (click)="addAttr()" nz-tooltip nzTitle="添加一条属性" nzPlacement="right">
          <i nz-icon nzType="plus" nzTheme="outline"></i>
        </button> -->
        <div Button [type]="'primary'" [size]="'small'" (click)="addAttr()"><i class="icon ion-android-add"></i></div>
      </td>
      <td *ngIf="data.code!='null'" style="width: 15%;">
        <!-- <input type="text" nz-input [(ngModel)]="data['name']" placeholder="名称" /> -->
        <InputItem [(ngModel)]="data['name']" [placeholder]="'名称'"></InputItem>
      </td>
      <td *ngIf="data.code!='null'" style="width: 15%;">
        <!-- <input type="text" nz-input [(ngModel)]="data['code']" placeholder="编号"/> -->
        <InputItem [(ngModel)]="data['code']" [placeholder]="'编号'"></InputItem>
      </td>
      <td *ngIf="data.code!='null'" style="width: 17%;">
        <!-- <nz-select [(ngModel)]="data['valuetype']" nzPlaceHolder="请选择数值类型" style="width:100%;">
          <nz-option [nzValue]="'string'" [nzLabel]="'字符串'"></nz-option>
          <nz-option [nzValue]="'number'" [nzLabel]="'数字'"></nz-option>
          <nz-option [nzValue]="'bool'" [nzLabel]="'布尔'"></nz-option>
          <nz-option [nzValue]="'option'" [nzLabel]="'枚举'"></nz-option>
        </nz-select> -->
        <ion-select placeholder="值类型" [(ngModel)]="data['valuetype']" ok-text="确认" cancel-text="取消">
          <ion-select-option value="string">字符串</ion-select-option>
          <ion-select-option value="number">数字</ion-select-option>
          <ion-select-option value="bool">布尔</ion-select-option>
          <ion-select-option value="option">枚举</ion-select-option>
        </ion-select>
      </td>
      <td *ngIf="data.code!='null'" style="width: 15%;">
        <!-- <input type="text" nz-input [(ngModel)]="data['unit']" placeholder="请填写单位"/> -->
        <InputItem [(ngModel)]="data['unit']" [placeholder]="'单位'"></InputItem>
      </td>
      <td *ngIf="data.code!='null'" style="width: 14%;">
        <!-- <nz-switch class="switch" [(ngModel)]="data['sum']"></nz-switch> -->
        <Switch [(ngModel)]="data['sum']"></Switch>
      </td>
      <td *ngIf="data.code!='null'" style="width: 14%;">
        <!-- <nz-switch class="switch" [(ngModel)]="data['display']"></nz-switch> -->
        <Switch [(ngModel)]="data['display']"></Switch>
      </td>
      <td *ngIf="data.code!='null'" style="width: 10%; text-align: center;" (click)="remove(data['code'])">
        <a style="color: #ff2222">
          <!-- <i nz-icon nzType="delete" nzTheme="outline"></i> -->
          <i class="icon ion-android-delete"></i>
          <!-- 删除 -->
        </a>
      </td>
    </tr>
  </tbody>
</table>

<div style="display: flex; padding: 0% 20%;">
  <!-- <button nz-button nzType="primary" style="margin-right: 8px;width: 95px" (click)="submit()" [nzLoading]="loading">保存 -->
  <!-- </button> -->
  <!-- <button nz-button style="width: 95px;margin-right: 8px" (click)="reset()" [nzLoading]="loading">重置</button> -->
  <div Button [size]="'small'" [type]="'primary'" (click)="submit()">保存</div>
  <div Button [size]="'small'" (click)="reset()" [type]="'ghost'" [inline]="true" style="margin-left: 10%;">重置</div>
  <div Button [size]="'small'" (click)="close()" [type]="'ghost'" [inline]="true" style="margin-left: 10%;">取消</div>
</div>